<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 lang="en" dir="ltr">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../codebase/default.css" type="text/css" media="screen" title="no title" charset="utf-8"><title>
    dhtmlxtree:checkboxes_manipulation    [Skin test wiki]
  </title></head>

<body>
<div class="dokuwiki">
  
  <div class="stylehead">

    <div class="header">
    <a class="logo" href="http://dhtmlx.com" title="DHTMLX Documentation homepage"></a>
    <span class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</span>

    <div class="search-field">
        <form action="http://dhtmlx.com/dhxdocs/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit"></button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>    </div>
        <div class="buttons">
                <a class="doc"></a>
                <a title="DHTMLX Samples homepage" href="../samples.html" class="sample"/></a>
        </div>
     <!-- <div class="pagename">
        [[<a href="#"  title="Backlinks">dhtmlxtree:checkboxes_manipulation</a>]]
      </div>
      <div class="logo">
        <a href="/dhtmlx/_lab/wiki/doku.php"  name="dokuwiki__top" id="dokuwiki__top" accesskey="h" title="[H]">Skin test wiki</a>      </div>

      <div class="clearer"></div>-->
        
    </div>

    
<!--   <div class="bar" id="bar__top">
      <div class="bar-left" id="bar__topleft">
                <form class="button btn_revs" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="revisions" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Old revisions" class="button" accesskey="o" title="Old revisions [O]" /></div></form>      </div>

      <div class="bar-right" id="bar__topright">
        <form class="button btn_recent" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="recent" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Recent changes" class="button" accesskey="r" title="Recent changes [R]" /></div></form>        <form action="http://dhtmlx.com/dhxdocs/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit"></button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>&nbsp;
      </div>

      <div class="clearer"></div>
    </div> -->

<!--        <div class="breadcrumbs">
      <span class="bchead">Trace:</span> <span class="bcsep">&raquo;</span> <span class="curid"><a href="/dhtmlx/_lab/wiki/doku.php?id=dhtmlxtree:checkboxes_manipulation"  class="breadcrumbs" title="dhtmlxtree:checkboxes_manipulation">checkboxes_manipulation</a></span>    </div>
    -->

    
  </div>
  
  
  <div class="page">
    <!-- wikipage start -->
    <!-- TOC START -->
<div class="toc">
<div class="tocheader toctoggle" id="toc__header">Table of Contents</div>
<div id="toc__inside">

<ul class="toc">
<li class="clear">

<ul class="toc">
<li class="level2"><div class="li"><span class="li"><a href="#checkboxes_manipulation" class="toc">Checkboxes Manipulation</a></span></div>
<ul class="toc">
<li class="level3"><div class="li"><span class="li"><a href="#enabling_disabling_checkboxes" class="toc">Enabling/Disabling Checkboxes</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#checkboxes_state_manipulation" class="toc">Checkboxes State Manipulation</a></span></div></li></ul>
</li></ul>
</li></ul>
</div>
</div>
<!-- TOC END -->

<p>
<div class='backlinks'><div class='backlink last_backlink'><img src="icons___file.gif"  class="media" alt="" /><a href="../index.html" class="wikilink1" title="start">Index</a></div><div class='arrow'></div><div class='backlink last_backlink'><img src="icons___tree.gif"  class="media" alt="" /><a href="index.html" class="wikilink1" title="dhtmlxtree:toc">dhtmlxtree</a></div><div class='arrow'></div><div class='backlink'><span class="curid"><a href="dhtmlxtree___checkboxes_manipulation.html" class="wikilink1" title="dhtmlxtree:checkboxes_manipulation">  Checkboxes Manipulation  </a></span></div></div>

</p>

<h2><a name="checkboxes_manipulation" id="checkboxes_manipulation">Checkboxes Manipulation</a></h2>
<div class="level2">

<p>
dhtmlxTree operates the advanced chechbox system. Besides usual two-state checkboxes (checked item, unchecked item), there is the possibility to use three-state checkboxes with “partly-checked” value.

</p>

</div>

<h3><a name="enabling_disabling_checkboxes" id="enabling_disabling_checkboxes">Enabling/Disabling Checkboxes</a></h3>
<div class="level3">

</div>

<h4><a name="enabling_standard_checkboxes" id="enabling_standard_checkboxes">Enabling Standard Checkboxes</a></h4>
<div class="level4">

<p>

Method enableCheckboxes() does the very thing:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enablecheckboxes.html'><b><span class="me1">enableCheckBoxes</span></b></a><span class="br0">&#40;</span>mode<span class="sy0">,</span> hidden<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The parameters here are as follows:
</p>
<ul>
<li class="level1"><div class="li">  mode(true|false) - false stands for hiding all the checkboxes, while true stands for showing them all in the tree;</div>
</li>
<li class="level1"><div class="li">  hidden - setting it to true means that checkboxes are not rendered, but can be shown by showItemCheckbox() method.</div>
</li>
</ul>

<p>
In case of creating checkboxes with the help of the above mentioned method, they will possess the usual checkbox states:
</p>
<ul>
<li class="level1"><div class="li">  checked;</div>
</li>
<li class="level1"><div class="li">  unchecked.</div>
</li>
</ul>

</div>

<h4><a name="enabling_three-state_checkboxes" id="enabling_three-state_checkboxes">Enabling Three-State Checkboxes</a></h4>
<div class="level4">

<p>

The following method is responsible for enabling three-state checkboxes:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enablethreestatecheckboxes.html'><b><span class="me1">enableThreeStateCheckboxes</span></b></a><span class="br0">&#40;</span><span class="kw2">true</span>|false<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The following states are available for three-state checkboxes:
</p>
<ul>
<li class="level1"><div class="li">   checked;</div>
</li>
<li class="level1"><div class="li">   unchecked;</div>
</li>
<li class="level1"><div class="li">   partially checked.</div>
</li>
</ul>

<p>
The third state takes place when the item has several child nodes among which there are checked and unchecked ones.
</p>

<p>
It should be noted that in case when three-state checkboxes are enabled, a click on a parent unchecked checkbox will result in checking it together with all its child items, and vice versa.
</p>

</div>

<h4><a name="disabling_a_checkbox" id="disabling_a_checkbox">Disabling a Checkbox</a></h4>
<div class="level4">

<p>

A checkbox of a certain item can be disabled. The parameters that are to be specified:
</p>
<ul>
<li class="level1"><div class="li">  itemId - id of the item in question;</div>
</li>
<li class="level1"><div class="li">  mode(true|false) - indicates whether the checkbox is disabled (true) or enabled (false).</div>
</li>
</ul>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_disablecheckbox.html'><b><span class="me1">disableCheckbox</span></b></a><span class="br0">&#40;</span>itemId<span class="sy0">,</span>mode<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
</div>

<h4><a name="enabling_checkboxes_for_specific_items" id="enabling_checkboxes_for_specific_items">Enabling Checkboxes for Specific Items</a></h4>
<div class="level4">

<p>

The user can set checkboxes for some specific items only. This can be done in the following way:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enablecheckboxes.html'><b><span class="me1">enableCheckBoxes</span></b></a><span class="br0">&#40;</span><span class="kw2">true</span><span class="sy0">,</span> <span class="kw2">true</span><span class="br0">&#41;</span>;
        ...   
        <span class="me1">tree</span>.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_showitemcheckbox.html'><b><span class="me1">showItemCheckbox</span></b></a><span class="br0">&#40;</span>id<span class="sy0">,</span> mode<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The parameters here are:
</p>
<ul>
<li class="level1"><div class="li">  id - id of the item;</div>
</li>
<li class="level1"><div class="li">  mode (true|false) - whether the checkbox will be visible (true) or not (false).</div>
</li>
</ul>

</div>

<h4><a name="enabling_smart_checkboxes" id="enabling_smart_checkboxes">Enabling Smart Checkboxes</a></h4>
<div class="level4">

<p>

Method enableSmartCheckboxes() enables three-state checkboxes logic. By default it is set to false:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enablesmartcheckboxes.html'><b><span class="me1">enableSmartCheckboxes</span></b></a><span class="br0">&#40;</span><span class="kw2">true</span>|false<span class="br0">&#41;</span>; <span class="co1">// false by default</span>
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
</div>

<h3><a name="checkboxes_state_manipulation" id="checkboxes_state_manipulation">Checkboxes State Manipulation</a></h3>
<div class="level3">

</div>

<h4><a name="checking_unchecking_tree_item" id="checking_unchecking_tree_item">Checking/Unchecking Tree Item</a></h4>
<div class="level4">

<p>

Any checkbox in the tree can be easily checked|unchecked from script with the help of the following method:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_setcheck.html'><b><span class="me1">setCheck</span></b></a><span class="br0">&#40;</span>id<span class="sy0">,</span> mode<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The parameters are as follows:
</p>
<ul>
<li class="level1"><div class="li">  id - id of the item in question;</div>
</li>
<li class="level1"><div class="li">  mode (true|false) - if set to true, the item will be checked, while false means unchecking the item.</div>
</li>
</ul>

<p>
It should be noted that according to three-state checkboxes&#039; logic, if a parent item was checked with the help of setCheck() method, all its child items will become checked as well.
</p>

</div>

<h4><a name="checking_unchecking_tree_branch" id="checking_unchecking_tree_branch">Checking/Unchecking Tree Branch</a></h4>
<div class="level4">

<p>

Along with checking a tree item, a tree branch can also be easily checked/unchecked from script in the following way:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_setsubchecked.html'><b><span class="me1">setSubChecked</span></b></a><span class="br0">&#40;</span>id<span class="sy0">,</span> state<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The parameters are as follows:
</p>
<ul>
<li class="level1"><div class="li">  id - id of the item in question;</div>
</li>
<li class="level1"><div class="li">  state (true|false) - if set to true, the branch of items will be checked, while false means unchecking the branch.</div>
</li>
</ul>

</div>

<h4><a name="getting_checkbox_s_state" id="getting_checkbox_s_state">Getting Checkbox&#039;s State</a></h4>
<div class="level4">

<p>

State of the specified item&#039;s checkbox can be got in the following way:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        <span class="kw2">var</span> checkState <span class="sy0">=</span> tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_isitemchecked.html'><b><span class="me1">isItemChecked</span></b></a><span class="br0">&#40;</span>itemId<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
</div>

    <!-- wikipage stop -->
  </div>

  <div class="clearer">&nbsp;</div>

  
  <div class="stylefoot">

    <div class="meta">
      <div class="user">
              </div>
     <!-- <div class="doc">
        dhtmlxtree/checkboxes_manipulation.txt &middot; Last modified: 2009/07/30 12:56 (external edit)      </div>
    </div>-->

   
    <!--<div class="bar" id="bar__bottom">-->
      <!--<div class="bar-left" id="bar__bottomleft">-->
        <!---->
        <!--<form class="button btn_revs" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="revisions" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Old revisions" class="button" accesskey="o" title="Old revisions [O]" /></div></form>-->
      <!--</div>-->
      <!--<div class="bar-right" id="bar__bottomright">-->
        <!---->
        <!---->
        <!---->
        <!---->
        <!--<form class="button btn_login" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="login" /><input type="hidden" name="sectok" value="2aab840f4aa1a4d04a3f941d3ffb7b42" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Login" class="button" title="Login" /></div></form>-->
        <!--<form class="button btn_index" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="index" /><input type="hidden" name="id" value="dhtmlxtree:checkboxes_manipulation" /><input type="submit" value="Index" class="button" accesskey="x" title="Index [X]" /></div></form>-->
        <!--<a class="nolink" href="#dokuwiki__top"><input type="button" class="button" value="Back to top" onclick="window.scrollTo(0, 0)" title="Back to top" /></a>&nbsp;-->
      <!--</div>-->
      <!--<div class="clearer"></div>-->
    <!--</div>-->

  </div>

  

</div>

<div class="footerinc">


</div>

<div class="no"><img src="/dhtmlx/_lab/wiki/lib/exe/indexer.php?id=dhtmlxtree%3Acheckboxes_manipulation&amp;1257950451" width="1" height="1" alt=""  /></div>
     <div class="footer">
        <div class="footer-logo"></div>
        <div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
            	    </div>
</body>
</html>
